<template>
    <div class="main-layout">
        <main>
            <!-- 内容插槽 -->
            <slot/>
        </main>
        <footer>
            
            <div @click="toPage(it)" :class="['item', it.active ? 'active' : '']" v-for="it in footerList" :key="it.text">
                <i :class="[it.icon]"></i>
                <span>{{it.text}}</span>
            </div>
        </footer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                footerList: [
                    {icon: 'home', text: '首页', active: false, path: '/home'},
                    {icon: 'find', text: '分类', active: false, path: '/find'},
                    {icon: 'collect', text: '收藏', active: false, path: '/collect'},
                    // {icon: 'cart', text: '购物车', active: false, path: '/cart'},
                    {icon: 'me', text: '我的', active: false, path: '/me'}
                ]
            }
        },

        watch: {
            '$route.path': {
                immediate: true,
                handler(_path) {
                    console.log('------------- 当前的路由', _path)
                    this.footerList = this.footerList.map(it => {
                        it.active = it.path === _path
                        return it
                    })
                }
            }
        },

        // created() {
        //     console.log(this.$route)
        // },

        methods: {
            toPage(it) {
                // console.log(it)
                // 不应该在这里来进行数据计算，因为每一个页面都引入了一个单独的组件
                // 直接监听当前路由地址，然后根据路由地址来确定哪个应该选中
                // this.footerList = this.footerList.map(item => {
                //     // 表示当前点击的是哪个数据项
                //     // if (item.path === it.path) item.active = true
                //     item.active = item.path === it.path
                //     return item
                // })
                this.$router.push(it.path)
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../style/common.less";

    // 定义一个名字数组
    @icons: home find collect me;
    // length(@icons) 获取数组的长度
    .loop(@index: 1) when (@index <= length(@icons)) {

        // 获取数组的值，需要调用一个extract方法
        @icon: extract(@icons, @index);

        > i {
            // 使用变量的时候，如果是一个字符串，必须使用@{}
            &.@{icon} {
                background-image: url("../images/tabs/@{icon}.png");
            }
        }
        &.active {
            > i {
                &.@{icon} {
                    background-image: url("../images/tabs/@{icon}-act.png");
                }
            }
        }

        .loop(@index + 1);
    }

    .main-layout {
        display: block;
        height: 100%;
        > main {
            height: calc(100% - 49px);
            // 当设置横向滚动为关闭的时候，不设置纵向，那么纵向就是自动滚动的
            overflow-x: hidden;
            // background: #e9ecf1;
        }
        > footer {
            display: block;
            height: 49px;
            border-top: solid 1px #eeeeee;
            background: #fff;
            > .item {
                float: left;
                width: 25%;
                > i {
                    display: block;
                    height: 32px;
                    background-position: center bottom;
                    background-size: 22px;
                    background-repeat: no-repeat;
                }
                > span {
                    display: block;
                    height: 16px;
                    text-align: center;
                    font-size: .6rem;
                    color: #545456;
                }

                .loop();

                &.active {
                    > span {
                        color: #b42239;
                    }
                }
            }
            .clear();
        }
    }
</style>